import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_application_1/plugins/extended_image.dart';
import 'package:flutter_application_1/utils/source_utils.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class ThatPageBanner extends StatefulWidget {
  final List<String> urls;

  ThatPageBanner({
    this.urls = const [],
  });

  @override
  _ThatPageBannerState createState() => _ThatPageBannerState();
}

class _ThatPageBannerState extends State<ThatPageBanner> {
  ValueNotifier<int> _currentIndex = ValueNotifier<int>(0);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 170,
      margin: EdgeInsets.symmetric(
        horizontal: 10,
      ),
      padding: EdgeInsets.only(top: 10, left: 10, right: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        children: [
          Container(
            height: 140,
            child: Swiper(
              itemCount: widget.urls.length,
              loop: true,
              index: _currentIndex.value,
              onIndexChanged: (int index) {
                _currentIndex.value = index;
              },
              itemBuilder: (BuildContext context, int index) {
                return ExtendedImage.network(
                  widget.urls[index],
                  fit: BoxFit.cover,
                  loadStateChanged: commonLoadStateChanged,
                );
              },
            ),
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Image.asset(
                  ImageUtils.wrapAssets('fill-icon.jpg'),
                  width: 24,
                  height: 14,
                ),
                ValueListenableBuilder(
                  valueListenable: _currentIndex,
                  builder:
                      (BuildContext context, int currentIndex, Widget? child) {
                    return Row(
                      children: List.generate(
                        widget.urls.length,
                        (index) {
                          double size = 10;
                          return Container(
                            width: size,
                            height: size,
                            margin: EdgeInsets.only(left: 5),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(size),
                              color: currentIndex == index
                                  ? Color.fromRGBO(124, 245, 152, 1)
                                  : Color.fromRGBO(255, 232, 76, 1),
                            ),
                          );
                        },
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
